<template>
	<view class="store-container">
		<!-- 店铺 -->
		<view class="shop-details">
			<image :src="baseInfo.custAvatar"></image>
			<view class="shop-details-info">
				<view class="title">{{baseInfo.custName}}</view>
				<view class="describe">{{baseInfo.storeName}}</view>
			</view>
			<view class="shop-details-time">{{baseInfo.createTime && baseInfo.createTime.split(' ')[0]}}</view>
		</view>
		<!--  -->
		<view class="product-wrap" v-for="(item,index) in storeExtList" :key="index">
			<view class="title">{{item.name}} <view class="sub" v-if="item.name == '是否做培训'">{{item.details[0].isEnable == 1 ? '：是' : '：否'}}</view></view>
			<!--  -->
			<view class="content" :class="items.fatherCode=='XD_TASK_BRAND' ? 'wrap' : (items.fatherCode=='XD_TASK_QUESTION'&&!items.remark) || items.fatherCode=='XD_TASK_DOTR'&&!items.remark ? 'ddtwrap' : ''" v-for="(items,indexs) in item.details" :key="indexs">
				<view class="subtitle" v-if="items.dictName">
					{{items.dictName}}
					<template v-if="items.fatherCode != 'XD_TASK_BRAND'">
						<view class="sub" v-if="items.isEnable == 0">：否</view>
						<view class="sub" v-if="items.isEnable == 1">：是</view>
					</template>
					<template v-if="items.fatherCode == 'XD_TASK_BRAND' && items.childCode != 'XD_TASK_BRAND_3'">
						<view v-if="!items.remark">：无</view>
						<view v-else>
							<template v-if='items.remark.length == 0'>
								：无
							</template>
						</view>
					</template>
					<template v-if="items.childCode == 'XD_TASK_BRAND_3'&&items.files.length == 0">
						：无
					</template>
				</view>
				
				<template v-if="(items.isEnable == 1 && items.childCode!='XD_TASK_XIXX_0' && items.childCode!='XD_TASK_XIXX_1' && items.childCode!='XD_TASK_XIXX_2') || items.fatherCode=='XD_TASK_BRAND' || (items.isEnable == 0 && items.childCode == 'XD_TASK_XIXX_0') || (items.isEnable == 0 && items.childCode == 'XD_TASK_XIXX_2') || (items.isEnable == 0 && items.childCode == 'XD_TASK_XIXX_1')  || (items.isEnable == 0 && items.childCode == 'XD_TASK_XPGL_0')">
					
					<!-- 数量 -->
					<view class="number" v-if="items.childCode != 'XD_TASK_XIXX_0' && items.childCode != 'XD_TASK_XIXX_1' && items.childCode != 'XD_TASK_XIXX_2' && items.fatherCode != 'XD_TASK_BRAND' && items.quantity && items.quantity>0"><view class="label">数量:</view>{{items.quantity}}</view>
					
					<!-- 备注 -->
					<view v-if="items.remark && items.remark.length > 1" class="remarksWrap">
						<view class="remarks remarks-list" v-for="(itemss,indexss) in items.remark">
							<view class="dot">{{indexss+1}}.{{itemss}}</view>
						</view>
					</view>
					<view class="remarks" v-if="items.remark && items.remark.length == 1">{{items.remark && items.remark.toString()}}</view>
				
					<!-- 预计完成时间 -->
					<view class="number" v-if="['XD_TASK_YPGL', 'XD_TASK_XPGL', 'XD_TASK_CPEWM', 'XD_TASK_CPBQ', 'XD_TASK_XTXX'].includes(items.fatherCode) && items.planCompletionTime">
						<view class="label">预计完成时间:</view>{{items.planCompletionTime}}
					</view>
					<template v-else-if="items.todoInfo.id">
						<view class="number" ><view class="label">待办人:</view>{{items.todoInfo.handlerName}}</view>
						<view class="number" ><view class="label">预计完成时间:</view>{{items.todoInfo.planCompletionTime}}</view>
					</template>
					
					<!-- 图片 -->
					<view v-if="items.pics&&items.pics.length>0" class="img-list">
						<template v-for="(itemt,indext) in items.pics">
							<image :src="itemt.url" @tap.stop="imgPreview(index,indexs,indext)"></image>
						</template>
					</view>
					
					<!-- 视频 -->
					<view v-if="items.videos&&items.videos.length>0" class="img-list">
						<view class="video-wrap" v-for="(itemt,indext) in items.videos">
							<video :src="itemt.url" objectFit="fill" :initial-time="1" controls></video>
							<view class="my-video-bg" @tap.stop="showVideoFn(itemt.url)"></view>
						</view>
					</view>
					
					<!-- 附件 -->
					<view v-if="items.files&&items.files.length>0" class="img-list">
						<view class="video-wrap" v-for="(itemt,indext) in items.files">
							<view class="files-wrap" v-if="itemt.url.includes('.pdf')">
								<view class="click-wrap" @tap.stop="imgPreFiles(itemt.url)"></view>
								<ss-preview :fileUrl="itemt.url" fileType="2"></ss-preview>
							</view>
							<image v-else :src="itemt.url" @tap.stop="imgPreFileImgs(index,indexs,itemt.url)"></image>
						</view>
					</view>
					
				</template>
				
				<template v-if="(items.isEnable == 0 && !items.childCode && !items.fatherCode && !items.dictName)">
					
					<!-- 备注 -->
					<view v-if="items.remark && items.remark.length > 1" class="remarksWrap">
						<view class="remarks remarks-list" v-for="(itemss,indexss) in items.remark">
							<view class="dot">{{indexss+1}}.{{itemss}}</view>
						</view>
					</view>
					<view class="remarks" v-if="items.remark && items.remark.length == 1">{{items.remark && items.remark.toString()}}</view>
					
					<!-- 图片 -->
					<view v-if="items.pics&&items.pics.length>0" class="img-list">
						<template v-for="(itemt,indext) in items.pics">
							<image :src="itemt.url" @tap.stop="imgPreview(index,indexs,indext)"></image>
						</template>
					</view>
					
					<!-- 视频 -->
					<view v-if="items.videos&&items.videos.length>0" class="img-list">
						<view class="video-wrap" v-for="(itemt,indext) in items.videos">
							<video :src="itemt.url" objectFit="fill" :initial-time="1" controls></video>
							<view class="my-video-bg" @tap.stop="showVideoFn(itemt.url)"></view>
						</view>
					</view>
					
					<!-- 附件 -->
					<view v-if="items.files&&items.files.length>0" class="img-list">
						<view class="video-wrap" v-for="(itemt,indext) in items.files">
							<view class="files-wrap" v-if="itemt.url.includes('.pdf')">
								<view class="click-wrap" @tap.stop="imgPreFiles(itemt.url)"></view>
								<ss-preview :fileUrl="itemt.url" fileType="2"></ss-preview>
							</view>
							<image v-else :src="itemt.url" @tap.stop="imgPreFileImgs(index,indexs,itemt.url)"></image>
						</view>
					</view>
					
					<template v-if="items.todoInfo.id">
						<view class="number" ><view class="label">待办人:</view>{{items.todoInfo.handlerName}}</view>
						<view class="number" ><view class="label">预计完成时间:</view>{{items.todoInfo.planCompletionTime}}</view>
					</template>
					
				</template>
			</view>
		</view>
		
		<!-- 测试测试 -->
		<!-- <view @tap.stop="imgPreFiles('https://pi.4006002222.com/hifimage/xdImg/2024/6/5/171751882224452.xlsx')">1111</view> -->
		
		<!--  -->
		<view class="product-wrap" v-if="false">
			<view class="title">上传附件</view>
			<view class="attachment">
			</view>
    	</view>
		
		<!-- 视频放大 -->
		<view class="show-video-box" v-if="showVideoUrl.length>0" @tap.stop="closeVideoFn()">
			<view class="show-video-box-bd" @tap.stop="closeVideoFn()">
				<video id="myVideo" :src="showVideoUrl" :autoplay="true" controls :show-fullscreen-btn="true" @tap.stop="closeVideoFn()"></video>
				<view class="close-show-video-btn" @tap.stop="closeVideoFn()">返 回</view>
			</view>	
		</view>
		
	</view>
</template>

<script>
	import {
		getTaskExtDetaul
	} from '../../common/service.js'

	export default {
		data() {
			return {
				shadowStyle: {
					color: "#ffffff",
					backgroundImage: "none",
					paddingTop: "0",
				},
				baseInfo:{},
				storeExtList:[],
				taskId:'',
				showVideoUrl: '',
				videoContext: null,
				
			}
		},
		onLoad: function(option) {
			console.log('option',option)
			// 登陆
			this.LOGINACTION();
			this.taskId = option.taskId
			this.qureryGetTaskExtDetail(option.taskId)
		},
		onShow: function() {
			
		},
		methods: {
			// 附件预览
			imgPreFiles(url){
				const item = {
					type:'2',
					name:'预览文档',
					src: url
				}
				// uni.openDocument({
				//     filePath: url,
				//     fileType: 'doc, xls, ppt, pdf, docx, xlsx, pptx',
				//     success: function (res) {
				//         console.log('打开文档成功');
				//     },
				//     fail: function (err) {
				//         console.log('打开文档失败', err);
				//     }
				// });
				uni.navigateTo({
					url:'/pages/openPDF/index?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			
			// 附件预览里面的预览图片
			imgPreFileImgs(idx,indx,imgUrl) {
				const that = this;
				console.log('预览图片:',idx,indx,imgUrl);
				const arr = that.storeExtList[idx].details[indx].files
				
				const list = [];
				arr.forEach(function(item) {
					!item.url.includes('.pdf') && list.push(item.url)
				})
				console.log('预览结果',list)
				
				list.map((item,index) => {
					if( item == imgUrl){
						// 预览图片
						uni.previewImage({
							current: index,
							urls: list
						});
					}
				})
			},
			
			// 视频放大播放
			showVideoFn(url) {
				console.log(url)
				const that = this;
				this.showVideoUrl = url;
				setTimeout(function() {
					// 获取 video 上下文 videoContext 对象
					that.videoContext = uni.createVideoContext('myVideo');
					console.log('获取到视频对象:');
					console.log(that.videoContext);
					// 进入全屏状态
					that.videoContext.requestFullScreen();
					// 播放
					that.videoContext.play();
				}, 40)
			},
			
			// 关闭视频放大
			closeVideoFn() {
				this.videoContext.exitFullScreen();
				this.showVideoUrl = '';
			},
			
			// 查看大图/预览图片
			imgPreview(idx,indx,indt) {
				const that = this;
				console.log('预览图片:',idx,indx,indt);
				const arr = that.storeExtList[idx].details[indx].pics
				console.log(arr);
				if (arr.length > 0) {
					const list = [];
					arr.forEach(function(item) {
						list.push(item.url);
					})
					// 预览图片
					uni.previewImage({
						current: indt, // uni有一个自带的previewImage方法，是预览图片的效果，但current属性在h5下传入Number不兼容，所以使用数组的方式传入。
						urls: list
					});
				}
			},
			
			// 获取详细信息
			qureryGetTaskExtDetail(taskID){
				const that = this
				console.log('taskID',taskID)
				const params = {
					taskId: taskID
				}
				getTaskExtDetaul(params, function(resuser) {
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						if (rs.code == 200) {
							const list = rs.data || [];
							that.baseInfo = list.baseInfo
              that.storeExtList = list.items.map((item) => {
                const { completionResultList = [], details } = item;
                const completionResultMap = (completionResultList || []).reduce(
                  (acc, l) => {
                    acc[l.id] = l;
                    return acc;
                  },
                  {}
                );
                return {
                  ...item,
                  details: details.map((d) => ({
                    ...d,
                    todoInfo: completionResultMap[d.id] || {},
                  })),
                };
              });
							console.log('that.storeExtList',that.storeExtList)
						} else {
							if (rs.msg) {
								that.$refs.uToast.show({
									title: rs.msg || '获取详情失败',
									type: 'error',
									duration: 3000,
									callback: function() {
										return;
									}
								});
							}
						}
					} else {
						console.log('模拟数据')
						
					}
				}, function(e) {
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F3F5F7;
	}
	.store-container {
		padding: 20rpx;
		background-color: #F3F5F7;
	}
	
	.shop-details{
		position: relative;
		display: flex;
		width: 710rpx;
		// height: 180rpx;
		padding: 20rpx 0 20rpx 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		box-sizing: border-box;
		image{
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
		}
		&-info{
			flex: 1;
			padding-left: 20rpx;
			.title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
			}
			.describe{
				padding-right: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #666666;
			}
		}
		&-time{
			position: absolute;
			top: 42rpx;
			right: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
	}
	.product-wrap{
		padding: 0 20rpx 20rpx;
		background: #fff;
		margin-top: 20rpx;
		.title{
			display: flex;
			padding: 20rpx 0;
			line-height: 42rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			align-items: center;
			border-bottom: 1px solid #F7F7F7;
			.sub{
				font-size: 28rpx;
				color: #333333;
			}
		}
		.content{
			background: #F7F7F7;
			border-radius: 10rpx;
			margin-top: 20rpx;
			// padding: 30rpx 20rpx;
			padding: 0 20rpx;
			overflow: hidden;
			.subtitle{
				display: flex;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				padding: 30rpx 0;
				color: #666;
				align-items: center;
				.sub{
					color: #333;
				}
			}
			.number{
				display: flex;
				padding: 15rpx 0 10rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333;
				.label{
					color: #999999;
					padding-right: 10rpx;
				}
			}
			.remarks{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 40rpx;
				padding: 30rpx 0;
			}
			.remarksWrap{
				background: #F7F7F7;
				padding: 20rpx;
				.remarks{
					padding: 0;
				}
			}
			.img-list{
				display: flex;
				width: 640rpx;
				flex-wrap: wrap;
				margin-top: 20rpx;
				image{
					width: 150rpx;
					height: 150rpx;
					margin: 0 10rpx 20rpx 0;
					border-radius: 10rpx;
				}
			}
		}
		.video-wrap{
			position: relative;
			width: 150rpx;
			height: 150rpx;
			margin: 0 10rpx 20rpx 0;
			border-radius: 10rpx;
			image,
			video {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
			.files-wrap{
				position: relative;
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
				overflow: hidden;
				.click-wrap{
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
					z-index: 111;
				}
				
			}
		}
		.my-video-bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 8;
		}
		.wrap{
			background: transparent;
			margin-top: 0;
			padding: 0;
			.subtitle{
				height: 75rpx;
				line-height: 75rpx;
				color: #333;
			}
			.remarks{
				padding: 20rpx;
				background: #F7F7F7;
				word-break: break-all;
			}
			.remarks-list{
				padding: 0;
			}
		}
		.ddtwrap{
			margin: 0;
			padding: 0;
			margin-top: -22rpx;
		}
		.information{
			padding: 20rpx;
			background: #F7F7F7;
			border-radius: 10rpx;
			margin-top: 20rpx;
			font-family: PingFangSC, PingFang SC;
			.subtitle{
				font-weight: 600;
				font-size: 28rpx;
				color: #333333;
			}
			.tips{
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				padding: 5rpx 0;
			}
		}
		.attachment{
			display: flex;
		}
	}
	.show-video-box {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 500;
	}
	.show-video-box-bd{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	
	/* .show-video-box-bd video {
		width: 100%;
		height: 100%;
	} */
	
	.close-show-video-btn{
		width: 88rpx;
		height: 88rpx;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 99999999999999;
		background: url('') no-repeat center;
		background-size: 48rpx;
	}
</style>
